import { memo } from 'react';
import { Handle, Position } from '@xyflow/react';
import { Mail, Webhook, Database, FileText, Bell, Code2 } from 'lucide-react';

const iconMap = {
  mail: Mail,
  webhook: Webhook,
  database: Database,
  fileText: FileText,
  bell: Bell,
  default: Code2,
};

interface ActionNodeData {
  label: string;
  subtitle: string;
  icon: string;
}

interface ActionNodeProps {
  data: ActionNodeData;
  id: string;
}

export const ActionNode = memo(({ data }: ActionNodeProps) => {
  const IconComponent = iconMap[data.icon as keyof typeof iconMap] || iconMap.default;
  
  return (
    <div className="workflow-node workflow-node-action min-w-[200px] text-white">
      <div className="flex items-center gap-3 p-3">
        <div className="bg-white/20 p-2 rounded-lg">
          <IconComponent className="w-5 h-5" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="font-semibold text-sm">{data.label}</div>
          <div className="text-xs opacity-90">{data.subtitle}</div>
        </div>
      </div>
      
      <div className="px-3 pb-2">
        <div className="text-xs opacity-75">
          ⚡ Action Step
        </div>
      </div>
      
      <Handle
        type="target"
        position={Position.Left}
        className="workflow-handle"
        style={{ left: -6 }}
      />
      
      <Handle
        type="source"
        position={Position.Right}
        className="workflow-handle"
        style={{ right: -6 }}
      />
    </div>
  );
});